<template>
  <div class="theme">
    <!-- 主题酒店 -->
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="毕业去哪里" name="first"></el-tab-pane>
      <el-tab-pane label="超值酒店" name="second"></el-tab-pane>
      <el-tab-pane label="浪漫花海" name="third"></el-tab-pane>
      <el-tab-pane label="潜水胜地" name="fourth"></el-tab-pane>
      <el-tab-pane label="朝拜历史" name="five"></el-tab-pane>
    </el-tabs>
    <el-row class="imglist">
      <el-col :span="8" v-for="item in hotelList" :key="item.id">
        <img :src="item.image" alt="" />
        <div class="imgmb" @click="goto(item.pages)">
          <div class="htitle">
            <h3>{{ item.pages }}</h3>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "themehotel",

  data() {
    return {
      hotelList: [],
      activeName: "first",
    };
  },

  mounted() {
    this.handleClick({ index: parseInt(0) });
  },
  components: {},

  methods: {
    handleClick(tab) {
      // console.log("--", parseInt(tab.index)+1);
      this.$http
        .get("/hotelHomeIfy", {
          params: {
            aid: parseInt(tab.index)+1,
          },
        })
        .then((res) => {
          this.hotelList = res.data.data;
          // console.log(this.hotelList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goto(title) {
      this.$router.push("/listHotel/" + title);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__item {
  font-size: 18px;
  padding: 10px 40px;
  height: 50px;
  width: 190px;
  text-align: center;
}
/deep/ .el-tabs__active-bar {
  width: 190px;
}
.imglist {
  img {
    width: 100%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }
  /deep/ .el-col-8 {
    padding: 10px;
    position: relative;
  }
  .imgmb {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 380px;
    height: 285px;
    color: #fff;
    box-sizing: border-box;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    .htitle {
      position: absolute;
      top: 40%;
      left: 40%;
    }
  }
}
.el-col:hover img {
  transform: rotateX(10deg) rotateY(5deg);
}
.el-col:hover .imgmb {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5), transparent 60%);
}
.is-active{
  color: #000!important;
}
</style>